<template>
	<view class="container">
		<!-- 用户欢迎区域 -->
		<view class="user-greeting">
			<text>你好！{{ username }}</text>
		</view>

		<!-- 功能入口 -->
		<view class="function-grid">
			<navigator url="/pages/zaixian/zaixian">
				<view style="
            background-color: #26bf00;
            box-shadow: 0 6rpx 12rpx rgba(38, 191, 0, 0.8);
          " class="function-item" @click="navigateTo('consultation')">
					<image src="/static/index/yuyueguahao.png" class="function-icon"></image>
					<text>在线问诊</text>
				</view>
			</navigator>
			<navigator url="/pages/yuyue/yuyue">
				<view style="
            background-color: #00b7e1;
            box-shadow: 0 6rpx 12rpx rgba(0, 183, 255, 0.8);
          " class="function-item" @click="navigateTo('appointment')">
					<image src="/static/index/jingbao.png" class="function-icon"></image>
					<text>预约挂号</text>
				</view>
			</navigator>
		</view>
		<view class="list-grid">
			<view class="list-item">
				<navigator url="/pages/baodian/baodian">
					<image src="/static/yiyaoxiang.png" class="list-icon"></image>
					<view style="color: lawngreen; font-weight: bold">医疗宝典</view>
				</navigator>
			</view>
			<view class="list-item" @click="getConsultation">
				<image src="/static/index/chaxun.png" class="list-icon"></image>
				<view style="color: orange; font-weight: bold">药品查询</view>
			</view>
			<view class="list-item">
				<navigator url="/pages/Yaofang/Yaofang">
					<image src="/static/index/jiuhuche.png" class="list-icon"></image>
					<view style="color: #00b7e1; font-weight: bold">社区药房</view>
				</navigator>
			</view>
			<view class="list-item" @click="getYongyao">
				<image src="/static/index/tixing.png" class="list-icon"></image>
				<view style="color: red; font-weight: bold">用药提醒</view>
			</view>
		</view>
		<!-- 健康新闻区域 -->
		<view class="news-section">
			<view class="section-header">
				<view class="news-section-title">健康新闻</view>
				<view class="back-green"></view>
			</view>

			<view class="news-item" v-for="(item) in newList" :key="item.nid" @click="goToDetail(item.nid)">
				<view class="news-list">
					<view class="news-title">{{ item.title }}</view>
					<view class="news-meta">
						<text>热度 {{ item.hot }}</text>
						<text>{{ item.create_time }}</text>
					</view>
				</view>
				<image src="/static/index/aa.png" class="news-img" mode=""></image>
			</view>
		</view>
		<!-- 社区活动 -->
		<view class="shequ-section">
			<view class="section-header">
				<view class="news-section-title">社区活动</view>
				<view class="back-green"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	const newList = ref([]);
	const fromData = () => {
		uni.request({
			url: "http://localhost:3010/news/list?page=1&pagenum=2",
			method: "GET",
			header: {
				Authorization: `Bearer ${uni.getStorageSync("token")}`,
			},
			success: ((res) => {
				console.log(res)
				if (res.data.code === 200) {
					newList.value = res.data.data.data || [];
				}
			})
		});
	}

	// 跳转详情
	const goToDetail = (nid) => {
		uni.navigateTo({
			url: `/pages/newsDetails/newsDetails?id=${nid}`
		})
	}
	onMounted(async () => {
		fromData()
	});

	const getConsultation = () => {
		uni.switchTab({
			url: '/pages/Consultation/Consultation'
		})
	}

	const getYongyao = () => {
		uni.navigateTo({
			url: '/pages/Yongyao/Yongyao'
		})
	}
</script>

<style>
	/* 全局样式 */
	page {
		background-color: #e1e1e1;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
			Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	}

	.container {
		padding: 20rpx;
	}

	/* 用户欢迎区域 */
	.user-greeting {
		padding: 30rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	/* 功能入口网格 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.function-item {
		display: flex;
		/* flex-direction: column; */
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-radius: 40rpx;
		padding: 30rpx 0;
		font-size: 40rpx;
		font-weight: bold;
		color: white;
		width: 320rpx;
		height: 145rpx;
	}

	.function-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
	}

	.list-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.list-icon {
		width: 80rpx;
		height: 80rpx;
	}

	.list-item {
		width: 160rpx;
		height: 140rpx;
		text-align: center;
		padding-top: 10rpx;
		background-color: white;
		border-radius: 25rpx;
	}

	/* 健康新闻区域 */
	.section-header {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		color: #333;
		margin-left: 40rpx;
		padding-top: 30rpx;
	}

	.news-section {
		background-color: white;
		border-radius: 50rpx;
		height: 650rpx;
	}

	.news-section-title {
		z-index: 3;
		position: relative;
		font-size: 35rpx;
		font-style: italic;
	}

	.back-green {
		background-color: #20ff00;
		width: 150rpx;
		height: 30rpx;
		margin-left: 30rpx;
		position: relative;
		top: -20rpx;
		z-index: 0;
	}

	.news-item {
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.news-title {
		font-size: 35rpx;
		color: #333;
		margin-bottom: 16rpx;
	}

	.news-list {
		width: 400rpx;
	}

	.news-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 30rpx;
	}

	.news-meta {
		width: 400rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
	}

	.shequ-section {
		background-color: white;
		border-radius: 50rpx;
		height: 500rpx;
		margin-top: 30rpx;
	}
</style>